<template>
  <div>
    <div style="text-align: right;padding: 10px 15px;">
      <a-button :loading="fqLoading" class="blue-btn" @click="applyForClick(true)" icon="audit">发起事项审批</a-button>
    </div>
    <commpVxeTable
      :key="reCommpVxeTable"
      :occupancyHeight="200"
      :config="dataTableConfig"
      :columns="columnsVxe"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      >
      <template v-slot:operation_fdbr="{row}" data-desc="办理人">
        <span style="padding-right: 21;" v-if="row.fdbr&&row.fdbr.length == 2">
            <span v-for="(trem,tI) in row.fdbr.split('')" :key="tI" >
                {{trem}}
                <span v-if="tI+1 !== row.fdbr.split('').length">&nbsp;&nbsp;</span>
            </span>
        </span>
        <span style="padding-right: 21;" v-else>{{ row.fdbr }}</span>
      </template>
      <template v-slot:operation_ffsrmc="{row}" data-desc="姓名">
        <span style="padding-right: 21;" v-if="row.ffsrmc&&row.ffsrmc.length == 2">
            <span v-for="(trem,tI) in row.ffsrmc.split('')" :key="tI" >
                {{trem}}
                <span v-if="tI+1 !== row.ffsrmc.split('').length">&nbsp;&nbsp;</span>
            </span>
        </span>
        <span style="padding-right: 21;" v-else>{{ row.ffsrmc }}</span>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
          <a-form layout="inline" class="approvalOfMatters-iniline-form">
              <a-form-item v-if="row.fhjmc == '起草' && row.fblzt == '待办'">
                  <a-button :loading="blLoading" class="blue-btn" @click="applyForClick(false)" icon="edit">办理</a-button>
              </a-form-item>
              <a-form-item style="margin-left: 10px;">
                  <a-button class="green-btn" @click="getViewXzswlc(row)" icon="eye">查看</a-button>
              </a-form-item>
              <a-form-item v-if="row.fhjmc == '起草' && row.fblzt == '待办'" style="margin-left: 10px;">
                  <a-button class="red-btn" @click="deleteApplyForClick(row)" icon="delete">删除</a-button>
              </a-form-item>
          </a-form>
      </template>
    </commpVxeTable>
    <handleModal ref="handleModalRef" @resetEvent="resetEventXz"></handleModal>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from '@/views/administrativeOffice-new/modal/handleModal.vue'
import { axios } from '@/utils/request'
import {
    queryByJodId,
    viewXzswlc,
    deletXzswlc
  } from './service/index'
export default {
  props:{
    conInterface: {
      type:[Array,Object],
      default: () => {},
      required:false
    },
    occupancyHeight:{
      type:Number,
      default: () => 100,
      required:false
    },
  },
  components:{
    commpVxeTable,handleModal
  },
  data() {
    return {
      idList: [],
      reCommpVxeTable: '',
      dataTableConfig: {
        api: this.conInterface.tableApi,
        rowId: 'id',
        paramet: {
          ...this.conInterface.paramet,
        }
      },
      columnsVxe: [
        {
            title: '环节名称',
            field: 'fhjmc',
        },{
            title: '办理人',
            field: 'fdbr',
            width: 150,
            interval:true,
            slots: {
                default:'operation_fdbr',
            }
        },{
            title: '发送人',
            field: 'ffsrmc',
            width: 150,
            interval:true,
            slots: {
                default:'operation_ffsrmc',
            }
        },{
            title: '发送时间',
            field: 'ffssj',
            width: 200,
        },{
            title: '办理时间',
            field: 'fblsj',
            width: 200,
        },{
            title: '办理意见',
            field: 'fblyj',
        },{
            title: '操作',
            field: 'jobid',
            width: 250,
            titleInterval:true,
            slots: {
            // 使用插槽模板渲染
                header:'data3_header',
                default: 'operation_btn',
            },
        }
      ],
      fqLoading: false,
      blLoading: false,
    }
  },
  watch:{
    conInterface(newValue,oldValue){
      this.reCommpVxeTable = Date.now()
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
          val.forEach(item => {
              this.idList.push(item.id)
          });
      }
    },
    // 发起行政事务审批
    async applyForClick(val){
      if(val){
        this.fqLoading = true
      } else {
        this.blLoading = true
      }
        axios({
            url: this.conInterface.initiateApi,
            method:'get' ,
            params: {
              ...this.conInterface.paramet,
            },
            url_1:this.conInterface.urlType?'':'outside',
            url_2:this.conInterface.urlType?'outside':''
        }).then(res => {
            if(res.success){
                if(res.result.fhjmc == '起草' || res.result.fhjmc == '无'){
                    this.reviseClick(res.result,false)
                } else {
                    this.reviseClick(res.result,true)
                }
            } else {
                this.$message.warning(res.message)
            }
            this.fqLoading = false
            this.blLoading = false
        })
      },
      // 点击办理
      reviseClick(row,view){
          //console.log(row)
          let data = {
              jobId: row.jobId,
              lcmbbm: row.lcmbbm,
              fpid: row.fpid,
          }
          queryByJodId(data).then(res => {
              //console.log(res)
              let resA = res.result
              if(res.code == 200){
                if(view){
                  resA.hjmc = '我的已办'
                }
                this.$nextTick(_ => {
                    //console.log('-------------',res,'++++++++++++++')
                    this.$refs.handleModalRef.modalClick(resA)
                })
              }
          })
      },
      // 行政事务流程-查看
      getViewXzswlc(row){
        //console.log(row)
        viewXzswlc({jobid: row.id}).then(res => {
          let resA = res.result
          this.reviseClick(resA,true)
          // resA.hjmc = '我的已办'
          // this.$nextTick(_ => {
          //     //console.log('-------------',res,'++++++++++++++')
          //     this.$refs.handleModalRef.modalClick(resA)
          // })
        })
      },
      // 行政事务流程-删除
      deleteApplyForClick(row){
        var that = this
        that.$confirm({
          title: '您确定要删除当前申请吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            deletXzswlc({jobid: row.id}).then(res => {
              if(res.code == 200){
                that.$message.success(res.message)
                that.reCommpVxeTable = Date.now()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      resetEventXz(){
        // this.dataTableConfig.paramet.fprjbxxid = this.fromState.id
        this.reCommpVxeTable = Date.now()
      },
  },
}
</script>
<style lang="less">
  .approvalOfMatters-iniline-form .ant-form-item {
    margin-right: 0 !important;
  }
</style>
